<template>
	<div class="Info-show">
		<div class="Info-show-warpper">
			<div class="info-header clear">
				<div class="info-add pull-left" @click="add">
					<Button type="success">新增handler</Button>
				</div>
				<div class="info-add pull-left" style="margin-left: 5px;">
					<Button type="primary">上传handler文档 </Button>
				</div>
				<div class="info-add pull-left" @click="actionHandler(true)" style="margin-left: 5px;">
					<Button type="success">批量启动handler </Button>
				</div>
				<div class="info-add pull-left" @click="actionHandler(false)" style="margin-left: 5px;">
					<Button type="error">批量停止handler </Button>
				</div>
			</div>
			<div class="info-table">
				<info-table 
					class="small-table"
					ref="info-table"
					:thead="thead" 
					:tbody="tbody"
					:total="total"
					:isSelect="true"
					@selectChange="selectChange"></info-table>
			</div>
		</div>
		
		<info-modal 
			ref="action-modal"
			class="applicationService-action-modal"
			:title="actionTitle"
			:isCancel="true"
			@cancel="actionCancel">
			<div class="applicationService-form">
				<Form 
					ref="form" 
					:model="formItem" 
					:rules="rules"
					:label-width="90">
					<Row>
						<Col span="12">
							<FormItem label="handler名称" prop="handlerName">
					            <Input v-model="formItem.handlerName"></Input>
					        </FormItem>
						</Col>
						<Col span="12">
							<FormItem label="所属系统" prop="appNames">
								<Select v-model="formItem.appNames" class="action-Input">
							        <Option v-for="item in sysList" :value="item.id">{{ item.appName }}</Option>
							   	</Select>
					        </FormItem>
						</Col>
					</Row>
			        <FormItem label="handler路径" prop="handlerPath">
			            <Input v-model="formItem.handlerPath">
			            	<Button slot="append" icon="folder" @click.native="handlerPathClick">选择文件</Button>
			            </Input>
			        </FormItem>
			        <FormItem label="启动参数" prop="runParams">
			            <Input type="textarea" v-model="formItem.runParams"></Input>
			        </FormItem>
			        <FormItem label="配置文件" prop="handlerConfig">
			            <Input type="textarea" v-model="formItem.handlerConfig"></Input>
			        </FormItem>
			        <FormItem label="备注" prop="remark">
			            <Input type="textarea" v-model="formItem.remark"></Input>
			        </FormItem>
			        <FormItem>
			            <Button type="primary" @click="commitForm">提交</Button>
			            <Button type="ghost" @click="resetForm" style="margin-left: 8px">重置</Button>
			        </FormItem>
				</Form>
			</div>
		</info-modal>
		
		<info-modal 
			ref="action-path-modal"
			class="applicationService-actionPath-modal"
			title="选择handler路径">
			<div class="applicationService-actionPath-warpper">
				<div class="applicationService-service-warpper">
					<ul class="applicationService-service-list">
						<li 
							class="applicationService-service-detail" 
							v-for="item in serviceList"
							@click="serviceClick(item)">
							<Icon type="home"></Icon>
							{{item}}
						</li>
					</ul>
				</div>
				<div class="applicationService-document-warpper ">
					<div class="applicationService-document-back">
						<Icon type="arrow-left-a" @click.native="documentBack"></Icon>	
					</div>
					<div class="applicationService-document-content">
						<ul class="applicationService-document-list">
							<li 
								class="applicationService-document-detail" 
								v-for="item in documentList"
								@click="documentClick(item)">
								<Icon :type="item.isFile ? 'folder' : 'document-text'"></Icon>
								{{item.fileName}}
							</li>
						</ul>
					</div>
				</div>
			</div>
		</info-modal>
		
		<warn-modal 
			title="警告" 
			message="确定要删除该服务？" 
			ref="del-warn"
			@sure="delCommit"></warn-modal>
		
		<loading v-show="showLoading"></loading>
	</div>
</template>

<script>
	import { loadingMixin, infoTableMixin, infoModalMixin, warnModalMixin } from 'common/js/mixins';
	import { ApplicationServiceThead } from 'common/js/table';
	import { ApplicationServiceRule } from 'common/js/rules';
	import { successNotice, errorNotice, errorMessage } from 'common/js/dom';
	import { getList, updateList, deleteList, startUp, shutDown, getServiceList, getDocumentList } from 'api/ApplicationService';
	import { getSysList } from 'api/Application';
	
	export default {
		mixins: [loadingMixin, infoTableMixin, infoModalMixin, warnModalMixin],
		created() {
			this.service = '';
			this.documentUrl = '';
			this.parentFile = '';
			this._getList();
			this._getSysList();
			this._getServiceList();
		},
		data() {
			return {
				serviceList: [],
				documentList: [],
				sysList: [],
				selectData: [],
				formItem: {
					handlerName: '',
					appNames: '',
					appServer: '',
					handlerPath: '',
					runParams: '',
					handlerConfig: '',
					remark: ''
				},
				rules: ApplicationServiceRule(),
				actionTitle: '',
				thead: ApplicationServiceThead(this),
				tbody: [],
				total: 0,
				showLoading: false
			}
		},
		methods: {
			documentBack() {
				if (!this.service && !this.parentFile) {
					return
				}
				this._getDocumentList(this.service, this.parentFile);
			},
			serviceClick(item) {
				this.service = item;
				this.formItem.appServer = item;
				this._getDocumentList(this.service, '');
			},
			documentClick(item) {
				this.documentUrl = item.absolutePath;
				this.formItem.handlerPath = this.documentUrl;
				
				if (!item.isFile) {
					this.$refs['action-path-modal'].hideModal();
					return						
				}
				
				this._getDocumentList(this.service, this.documentUrl);
			},
			handlerPathClick() {
				this.$refs['action-path-modal'].showModal();
			},
			selectChange(data) {
				this.selectData = data;
			},
			actionHandler(bol) {
				if (!this.selectData.length) {
					errorMessage('请选择需要启动的Handler。');
					return
				}
				
				let arr = [];
				
				if(bol) {
					this.selectData.map(item => {
						if (!item.isRunning.isRunning) {
							arr.push(item.id);						
						}
					})
				
					if (!arr.length) {
						errorMessage('您所选择的Handler已启动。');
						return
					}
					
					this._startUp(arr);
				}else {
					this.selectData.map(item => {
						if (item.isRunning.isRunning) {
							arr.push(item.id);						
						}
					})
				
					if (!arr.length) {
						errorMessage('您所选择的Handler已停止。');
						return
					}
					
					this._shutDown(arr);
				}
				
				
			},
			start(row, bol) {
				if (bol) {
					this._shutDown([row.id]);
				}else {
					this._startUp([row.id]);					
				}
			},
			actionCancel() {
				this.service = '';
				this.documentUrl = '';
				this.parentFile = '';
				this.documentList = [];
			},
			add() {
				this.resetForm();
				this.actionTitle = '新增应用系统';
				this.$refs['action-modal'].showModal();
			},
			edit(row) {
				this.formItem = row;
				this.actionTitle = '修改应用系统';
				this.$refs['action-modal'].showModal();
			},
			commitForm() {
				this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this._updateList(this.formItem);
                    }
                })
			},
			del(row) {
				this.formItem = row;
				this.$refs['del-warn'].showModal();
			},
			delCommit() {
				this._deleteList(this.formItem.id)
			},
			resetForm() {
				this.formItem.id = '';
				this.$refs['form'].resetFields();
			},
			_shutDown(arr) {
				this.showLoading = true;
				shutDown(arr)
					.then(res => {
						this.showLoading = false;
						this.$refs['info-table'].refresh();
						successNotice('操作成功');
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			},
			_startUp(arr) {
				this.showLoading = true;
				startUp(arr)
					.then(res => {
						this.showLoading = false;
						this.selectData = [];
						this.$refs['info-table'].refresh();
						successNotice('操作成功');
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			},
			_deleteList(id) {
				this.showLoading = true;
				deleteList(id)
					.then(res => {
						this.showLoading = false;
						this.$refs['info-table'].refresh();
						this.$refs['del-warn'].hideModal();
						successNotice('操作成功');
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			},
			_updateList(obj) {
				this.showLoading = true;
				updateList(obj)
                	.then(res => {
						this.showLoading = false;
						this.$refs['info-table'].refresh();
						this.$refs['action-modal'].hideModal();
						successNotice('操作成功');
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			},
			_getList(page) {
				this.showLoading = true;
				getList(page)
					.then(res => {
						this.tbody = res.rows;
						this.total = res.total;
						this.showLoading = false;
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			},
			_getSysList() {
				this.showLoading = true;
				getSysList()
					.then(res => {
						this.sysList = res;
						this.showLoading = false;
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			},
			_getServiceList() {
				this.showLoading = true;
				getServiceList()
					.then(res => {
						this.serviceList = res;
						this.showLoading = false;
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			},
			_getDocumentList(service, documentUrl) {
				this.showLoading = true;
				getDocumentList(service, documentUrl)
					.then(res => {
						this.documentList = res.resultMap.childrenFile;
						this.parentFile = res.resultMap.parentFile;
						console.log(res)
						this.showLoading = false;
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			}
			
		}
	}
</script>

<style lang="scss">
	.applicationService-action-modal {
		.ivu-modal {
			width: 700px;			
		}
		.applicationService-form {
			width: 550px;
			margin: 0 auto;
		}
	}
	
	.applicationService-actionPath-modal {
		.ivu-modal {
			width: 500px;			
		}
		.applicationService-actionPath-warpper {
			display: flex;
			height: 250px;
			.applicationService-service-warpper {
				flex: 0 0 150px;
				height: 100%;
				border-right: 1px solid lightgray;
				overflow: auto;
				.applicationService-service-list {
					padding-left: 5px;
					.applicationService-service-detail {
						cursor: pointer;
					}
					.applicationService-service-detail:hover {
						text-decoration: underline;
					}
				}
			}
			.applicationService-document-warpper {
				flex: 1;
				height: 100%;
				.applicationService-document-back {
					padding-right: 5px;
					text-align: right;
				}
				.applicationService-document-back:hover {
					i {
						cursor: pointer;
						text-decoration: underline;
					}
				}
				.applicationService-document-content {
					height: calc(100% - 13px);
					overflow: auto;
					.applicationService-document-list {
						padding-left: 5px;
						.applicationService-document-detail {
							cursor: pointer;
						}
						.applicationService-document-detail:hover {
							text-decoration: underline;
						}
					}					
				}
			}
		}
	}
</style>